// @ts-nocheck
import React, { useEffect } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { NavBar, TabBar } from 'antd-mobile';
import {
  useHistory,
  useLocation,
  MemoryRouter as Router,
  Switch,
} from 'react-router-dom';
import {
  AppOutline,
  MovieOutline,
  UserOutline,
  AppstoreOutline,
  CompassOutline,
} from 'antd-mobile-icons';
import './index.less';
import '@/pages/golobo.less';
import '@/astise/font/iconfont.js';
import 'lib-flexible';
import 'animate.css';

export default function IndexPage(props: any) {
  console.log(props, '主');
  const history = useHistory();
  const location = useLocation();
  const { pathname } = location;
  const setRouteActive = (value: string) => {
    history.push(value);
  };
  const routerType = {
    POP: 'back',
    PUSH: 'dg',
    REPLACE: 'dg',
  };
  useEffect(() => {
    // console.log(props);
    history.push('/home');
  }, []);
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/films',
      title: '电影',
      icon: <MovieOutline />,
    },
    {
      key: '/discover',
      title: '发现',
      icon: <CompassOutline />,
    },
    {
      key: '/showhome',
      title: '演出',
      icon: <AppstoreOutline />,
    },
    {
      key: '/mine',
      title: '我的',
      icon: <UserOutline />,
    },
  ];

  return (
    <div className="app">
      {/* <TransitionGroup>
  <CSSTransition timeout={3000}classNames={{
          enter: "animate__animated",
          enterActive: "animate__fadeIn",
          exit: "animate__animated",
          exitActive: "animate__fadeOut",
        }} unmountOnExit key={props.location.pathname}>
      {props.children}

  </CSSTransition>
</TransitionGroup> */}
      <TransitionGroup className="sss">
        <CSSTransition
          key={props.location.pathname}
          appear
          timeout={3000}
          classNames={{
            enter: 'animate__animated',
            enterActive: 'animate__fadeIn',
            exit: 'animate__animated',
            exitActive: 'animate__fadeOut',
          }}
        >
          {props.children}
        </CSSTransition>
      </TransitionGroup>

      <div className="foot">
        <TabBar
          activeKey={pathname}
          onChange={(value: any) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
